<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org">
  <th:block th:fragment="pagination">
    <th:block th:if="${htmlType == 'index'}">
      <th:block
        th:if="${posts.hasPrevious() || posts.hasNext()}"
        th:with="totalPages = ${posts.totalPages}, pageIndex = ${posts.page}"
      >
        <!-- 页面总数小于等于7 -->
        <ul class="joe_pagination" th:if="${(totalPages le 7) && (totalPages gt 0)}">
          <li class="prev" th:classappend="${1 eq pageIndex} ? ' disabled' : ''">
            <a th:href="@{${posts.prevUrl}}">
              <i class="joe-font joe-icon-prev"></i>
            </a>
          </li>
          <li th:classappend="${index eq pageIndex} ? 'active'" th:each="index : ${#numbers.sequence(1, totalPages)}">
            <a th:href="${'/page/' + index}" th:text="${index}"></a>
          </li>
          <li class="next" th:href="@{${posts.nextUrl}}" th:classappend="${pageIndex eq totalPages} ? ' disabled' : ''">
            <a th:href="@{${posts.nextUrl}}">
              <i class="joe-font joe-icon-next"></i>
            </a>
          </li>
        </ul>
        <!-- 页面总数大于7-->
        <ul class="joe_pagination" th:if="${totalPages gt 7}">
          <li class="prev" th:classappend="${1 eq pageIndex} ? ' disabled' : ''">
            <a th:href="@{${posts.prevUrl}}">
              <i class="joe-font joe-icon-prev"></i>
            </a>
          </li>
          <li th:classappend="${1 eq pageIndex} ? 'active' : ''">
            <a href="/">1</a>
          </li>
          <!-- 当前页面小于等于4 -->
          <li
            th:classappend="${index eq pageIndex} ? 'active' : ''"
            th:each="index : ${#numbers.sequence(2,5)}"
            th:if="${pageIndex le 4}"
          >
            <a th:href="${'/page/' + index}" th:text="${index}"></a>
          </li>
          <li th:if="${pageIndex le 4}">
            <a href="#">...</a>
          </li>
          <!-- 最后一页与当前页面之差小于等于3 -->
          <li th:if="${totalPages - pageIndex le 3}">
            <a href="#">...</a>
          </li>
          <li
            th:classappend="${index eq pageIndex} ? 'active' : ''"
            th:each="index : ${#numbers.sequence(totalPages - 4, totalPages - 1)}"
            th:if="${totalPages - pageIndex le 3}"
          >
            <a th:href="${'/page/' + index}" th:text="${index}">
            </a>
          </li>
          <!-- 最后一页与当前页面之差大于3 且当前页面大于4 -->
          <li th:if="${(pageIndex gt 4) && (totalPages - pageIndex gt 3)}">
            <a href="#">...</a>
          </li>
          <li
            th:each="index : ${#numbers.sequence(pageIndex - 1,pageIndex + 1)}"
            th:classappend="${index eq pageIndex} ? 'active' : ''"
            th:if="${(pageIndex gt 4) && (totalPages - pageIndex gt 3)}"
          >
            <a th:href="${'/page/' + index}" th:text="${index}">
            </a>
          </li>
          <li th:if="${(pageIndex gt 4) && (totalPages - pageIndex gt 3)}">
            <a href="#">...</a>
          </li>
          <!-- 尾页 -->
          <li th:classappend="${totalPages eq pageIndex} ? 'active' : ''">
            <a th:href="${'/page/'+totalPages}" th:text="${totalPages}">
            </a>
          </li>
          <li
            class="next"
            th:classappend="${index eq totalPages} ? ' disabled' : ''"
            th:href="@{${posts.nextUrl}}"
          >
            <a th:href="@{${posts.nextUrl}}">
              <i class="joe-font joe-icon-next"></i>
            </a>
          </li>
        </ul>
      </th:block>
    </th:block>
    <th:block th:if="${htmlType == 'archives'}" th:fragment="archives">
      <th:block th:if="${archives.hasPrevious() || archives.hasNext()}"
        th:with="totalPages = ${archives.totalPages}, pageIndex = ${archives.page}">
        <!-- 页面总数小于等于7-->
        <ul class="joe_pagination" th:if="${(totalPages le 7) && (totalPages gt 0)}">
          <li class="prev" th:classappend="${1 eq pageIndex} ? ' disabled' : ''">
            <a th:href="@{${archives.prevUrl}}">
              <i class="joe-font joe-icon-prev"></i>
            </a>
          </li>
          <li th:classappend="${index eq pageIndex} ? 'active'" th:each="index : ${#numbers.sequence(1, totalPages)}">
            <a th:href="@{/archives/page/} + ${index}" th:text="${index}"></a>
          </li>
          <li class="next" th:classappend="${pageIndex eq totalPages} ? ' disabled' : ''">
            <a th:href="@{${archives.nextUrl}}">
              <i class="joe-font joe-icon-next"></i>
            </a>
          </li>
        </ul>
        <!-- 页面总数大于7-->
        <ul class="joe_pagination" th:if="${totalPages gt 7}">
          <li class="prev" th:classappend="${1 eq pageIndex} ? ' disabled' : ''">
            <a th:href="@{${archives.prevUrl}}">
              <i class="joe-font joe-icon-prev"></i>
            </a>
          </li>
          <li th:classappend="${1 eq pageIndex} ? 'active' : ''">
            <a href="/">1</a>
          </li>
          <!-- 当前页面小于等于4 -->
          <li
            th:classappend="${index eq pageIndex} ? 'active' : ''"
            th:each="index : ${#numbers.sequence(2,5)}"
            th:if="${pageIndex le 4}"
          >
            <a th:href="@{/archives/page/} + ${index}" th:text="${index}"></a>
          </li>
          <li th:if="${pageIndex le 4}">
            <a href="#">...</a>
          </li>
          <!-- 最后一页与当前页面之差小于等于3 -->
          <li th:if="${totalPages - pageIndex le 3}">
            <a href="#">...</a>
          </li>
          <li
            th:classappend="${index eq pageIndex} ? 'active' : ''"
            th:each="index : ${#numbers.sequence(totalPages - 4, totalPages - 1)}"
            th:if="${totalPages - pageIndex le 3}"
          >
            <a th:href="@{/archives/page/} + ${index}" th:text="${index}">
            </a>
          </li>
          <!-- 最后一页与当前页面之差大于3 且当前页面大于4 -->
          <li th:if="${(pageIndex gt 4) && (totalPages - pageIndex gt 3)}">
            <a href="#">...</a>
          </li>
          <li
            th:each="index : ${#numbers.sequence(pageIndex - 1,pageIndex + 1)}"
            th:classappend="${index eq pageIndex} ? 'active' : ''"
            th:if="${(pageIndex gt 4) && (totalPages - pageIndex gt 3)}"
          >
            <a th:href="@{/archives/page/} + ${index}" th:text="${index}">
            </a>
          </li>
          <li th:if="${(pageIndex gt 4) && (totalPages - pageIndex gt 3)}">
            <a href="#">...</a>
          </li>
          <!-- 尾页 -->
          <li th:classappend="${totalPages eq pageIndex} ? 'active' : ''">
            <a th:href="@{/archives/page/}+${totalPages}" th:text="${totalPages}">
            </a>
          </li>
          <li
            class="next"
            th:classappend="${index eq totalPages} ? ' disabled' : ''"
            th:href="@{${archives.nextUrl}}"
          >
            <a th:href="@{${archives.nextUrl}}">
              <i class="joe-font joe-icon-next"></i>
            </a>
          </li>
        </ul>
      </th:block>
    </th:block>
    <th:block th:if="${htmlType == 'category'}" th:fragment="category">
      <th:block th:if="${posts.hasPrevious() || posts.hasNext()}"
        th:with="totalPages = ${posts.totalPages}, pageIndex = ${posts.page}">
        <!-- 页面总数小于等于7-->
        <ul class="joe_pagination" th:if="${(totalPages le 7) && (totalPages gt 0)}">
          <li class="prev" th:classappend="${1 eq pageIndex} ? ' disabled' : ''">
            <a th:href="@{${posts.prevUrl}}">
              <i class="joe-font joe-icon-prev"></i>
            </a>
          </li>
          <li th:classappend="${index eq pageIndex} ? 'active'" th:each="index : ${#numbers.sequence(1, totalPages)}">
            <a th:href="@{/categories}+'/'+${category.spec.slug}+'/page/' + ${index}" th:text="${index}"></a>
          </li>
          <li class="next" th:classappend="${pageIndex eq totalPages} ? ' disabled' : ''">
            <a th:href="@{${posts.nextUrl}}">
              <i class="joe-font joe-icon-next"></i>
            </a>
          </li>
        </ul>
        <!-- 页面总数大于7-->
        <ul class="joe_pagination" th:if="${totalPages gt 7}">
          <li class="prev" th:classappend="${1 eq pageIndex} ? ' disabled' : ''">
            <a th:href="@{${posts.prevUrl}}">
              <i class="joe-font joe-icon-prev"></i>
            </a>
          </li>

          <li th:classappend="${1 eq pageIndex} ? 'active' : ''">
            <a href="/">1</a>
          </li>
          <!-- 当前页面小于等于4 -->
          <li
            th:classappend="${index eq pageIndex} ? 'active' : ''"
            th:each="index : ${#numbers.sequence(2,5)}"
            th:if="${pageIndex le 4}"
          >
            <a th:href="@{/categories}+'/'+${category.spec.slug}+'/page/' + ${index}" th:text="${index}"></a>
          </li>
          <li th:if="${pageIndex le 4}">
            <a href="#">...</a>
          </li>
          <!-- 最后一页与当前页面之差小于等于3 -->
          <li th:if="${totalPages - pageIndex le 3}">
            <a href="#">...</a>
          </li>
          <li
            th:classappend="${index eq pageIndex} ? 'active' : ''"
            th:each="index : ${#numbers.sequence(totalPages - 4, totalPages - 1)}"
            th:if="${totalPages - pageIndex le 3}"
          >
            <a th:href="@{/categories}+'/'+${category.spec.slug}+'/page/' + ${index}" th:text="${index}">
            </a>
          </li>
          <!-- 最后一页与当前页面之差大于3 且当前页面大于4 -->
          <li th:if="${(pageIndex gt 4) && (totalPages - pageIndex gt 3)}">
            <a href="#">...</a>
          </li>
          <li
            th:each="index : ${#numbers.sequence(pageIndex - 1,pageIndex + 1)}"
            th:classappend="${index eq pageIndex} ? 'active' : ''"
            th:if="${(pageIndex gt 4) && (totalPages - pageIndex gt 3)}"
          >
            <a th:href="@{/categories}+'/'+${category.spec.slug}+'/page/' + ${index}" th:text="${index}">
            </a>
          </li>
          <li th:if="${(pageIndex gt 4) && (totalPages - pageIndex gt 3)}">
            <a href="#">...</a>
          </li>
          <!-- 尾页 -->
          <li th:classappend="${totalPages eq pageIndex} ? 'active' : ''">
            <a th:href="@{/categories}+'/'+${category.spec.slug}+'/page/' + ${totalPages}" th:text="${totalPages}">
            </a>
          </li>
          <li
            class="next"
            th:classappend="${index eq totalPages} ? ' disabled' : ''"
            th:href="@{${posts.nextUrl}}"
          >
            <a th:href="@{${posts.nextUrl}}">
              <i class="joe-font joe-icon-next"></i>
            </a>
          </li>
        </ul>
      </th:block>
    </th:block>

    <th:block th:if="${htmlType == 'tag'}" th:fragment="tag">
      <th:block
        th:if="${posts.hasPrevious() || posts.hasNext()}"
        th:with="totalPages = ${posts.totalPages}, pageIndex = ${posts.page}"
      >
        <!-- 页面总数小于等于7-->
        <ul class="joe_pagination" th:if="${(totalPages le 7) && (totalPages gt 0)}">
          <li class="prev" th:classappend="${1 eq pageIndex} ? ' disabled' : ''">
            <a th:href="@{${posts.prevUrl}}">
              <i class="joe-font joe-icon-prev"></i>
            </a>
          </li>
          <li th:classappend="${index eq pageIndex} ? 'active'" th:each="index : ${#numbers.sequence(1, totalPages)}">
            <a th:href="@{/tags}+'/'+${tag.spec.slug}+'/page/' + ${index}" th:text="${index}"></a>
          </li>
          <li class="next" th:classappend="${pageIndex eq totalPages} ? ' disabled' : ''">
            <a th:href="@{${posts.nextUrl}}">
              <i class="joe-font joe-icon-next"></i>
            </a>
          </li>
        </ul>
        <!-- 页面总数大于7-->
        <ul class="joe_pagination" th:if="${totalPages gt 7}">
          <li class="prev" th:classappend="${1 eq pageIndex} ? ' disabled' : ''">
            <a th:href="@{${posts.prevUrl}}">
              <i class="joe-font joe-icon-prev"></i>
            </a>
          </li>

          <li th:classappend="${1 eq pageIndex} ? 'active' : ''">
            <a href="/">1</a>
          </li>
          <!-- 当前页面小于等于4 -->
          <li
            th:classappend="${index eq pageIndex} ? 'active' : ''"
            th:each="index : ${#numbers.sequence(2,5)}"
            th:if="${pageIndex le 4}"
          >
            <a th:href="@{/tags}+'/'+${tag.spec.slug}+'/page/' + ${index}" th:text="${index}"></a>
          </li>
          <li th:if="${pageIndex le 4}">
            <a href="#">...</a>
          </li>
          <!-- 最后一页与当前页面之差小于等于3 -->
          <li th:if="${totalPages - pageIndex le 3}">
            <a href="#">...</a>
          </li>
          <li
            th:classappend="${index eq pageIndex} ? 'active' : ''"
            th:each="index : ${#numbers.sequence(totalPages - 4, totalPages - 1)}"
            th:if="${totalPages - pageIndex le 3}"
          >
            <a th:href="@{/tags}+'/'+${tag.spec.slug}+'/page/' + ${index}" th:text="${index}">
            </a>
          </li>
          <!-- 最后一页与当前页面之差大于3 且当前页面大于4 -->
          <li th:if="${(pageIndex gt 4) && (totalPages - pageIndex gt 3)}">
            <a href="#">...</a>
          </li>
          <li
            th:each="index : ${#numbers.sequence(pageIndex - 1,pageIndex + 1)}"
            th:classappend="${index eq pageIndex} ? 'active' : ''"
            th:if="${(pageIndex gt 4) && (totalPages - pageIndex gt 3)}"
          >
            <a th:href="@{/tags}+'/'+${tag.spec.slug}+'/page/' + ${index}" th:text="${index}">
            </a>
          </li>
          <li th:if="${(pageIndex gt 4) && (totalPages - pageIndex gt 3)}">
            <a href="#">...</a>
          </li>
          <!-- 尾页 -->
          <li th:classappend="${totalPages eq pageIndex} ? 'active' : ''">
            <a th:href="@{/tags}+'/'+${tag.spec.slug}+'/page/' + ${totalPages}" th:text="${totalPages}">
            </a>
          </li>
          <li
            class="next"
            th:classappend="${index eq totalPages} ? ' disabled' : ''"
            th:href="@{${posts.nextUrl}}"
          >
            <a th:href="@{${posts.nextUrl}}">
              <i class="joe-font joe-icon-next"></i>
            </a>
          </li>
        </ul>
      </th:block>
    </th:block>

    <th:block th:if="${htmlType == 'journals'}" th:fragment="moments">
      <th:block
        th:if="${moments.hasPrevious() || moments.hasNext()}"
        th:with="totalPages = ${moments.totalPages}, pageIndex = ${moments.page}"
      >
        <!-- 页面总数小于等于7 -->
        <ul class="joe_pagination" th:if="${(totalPages le 7) && (totalPages gt 0)}">
          <li class="prev" th:classappend="${1 eq pageIndex} ? ' disabled' : ''">
            <a th:href="@{${moments.prevUrl}}">
              <i class="joe-font joe-icon-prev"></i>
            </a>
          </li>
          <li
            th:classappend="${index eq pageIndex} ? 'active'"
            th:each="index : ${#numbers.sequence(1, totalPages)}"
          >
            <a th:href="@{/moments}+'/page/'+ ${index}" th:text="${index}"></a>
          </li>
          <li class="next" th:classappend="${pageIndex eq totalPages} ? ' disabled' : ''">
            <a th:href="@{${moments.nextUrl}}">
              <i class="joe-font joe-icon-next"></i>
            </a>
          </li>
        </ul>
        <!-- 页面总数大于7 -->
        <ul class="joe_pagination" th:if="${totalPages gt 7}">
          <li class="prev" th:classappend="${1 eq pageIndex} ? ' disabled' : ''">
            <a th:href="@{${moments.prevUrl}}">
              <i class="joe-font joe-icon-prev"></i>
            </a>
          </li>
          <li th:classappend="${1 eq pageIndex} ? 'active' : ''">
            <a href="/">1</a>
          </li>
          <!-- 当前页面小于等于4 -->
          <li
            th:classappend="${index eq pageIndex} ? 'active' : ''"
            th:each="index : ${#numbers.sequence(2,5)}"
            th:if="${pageIndex le 4}"
          >
            <a th:href="@{/moments}+'/page/' + ${index}" th:text="${index}"></a>
          </li>
          <li th:if="${pageIndex le 4}">
            <a href="#">...</a>
          </li>
          <!-- 最后一页与当前页面之差小于等于3 -->
          <li th:if="${totalPages - pageIndex le 3}">
            <a href="#">...</a>
          </li>
          <li
            th:classappend="${index eq pageIndex} ? 'active' : ''"
            th:each="index : ${#numbers.sequence(totalPages - 4, totalPages - 1)}"
            th:if="${totalPages - pageIndex le 3}"
          >
            <a th:href="@{/moments}+'/page/' + ${index}" th:text="${index}"></a>
          </li>
          <!-- 最后一页与当前页面之差大于3 且当前页面大于4 -->
          <li th:if="${(pageIndex gt 4) && (totalPages - pageIndex gt 3)}">
            <a href="#">...</a>
          </li>
          <li
            th:each="index : ${#numbers.sequence(pageIndex - 1,pageIndex + 1)}"
            th:classappend="${index eq pageIndex} ? 'active' : ''"
            th:if="${(pageIndex gt 4) && (totalPages - pageIndex gt 3)}"
          >
            <a th:href="@{/moments}+'/page/' + ${index}" th:text="${index}"></a>
          </li>
          <li th:if="${(pageIndex gt 4) && (totalPages - pageIndex gt 3)}">
            <a href="#">...</a>
          </li>
          <!-- 尾页 -->
          <li th:classappend="${totalPages eq pageIndex} ? 'active' : ''">
            <a th:href="@{/moments}+'/page/' + ${totalPages}" th:text="${totalPages}"></a>
          </li>
          <li
            class="next"
            th:classappend="${index eq totalPages} ? ' disabled' : ''"
            th:href="@{${posts.nextUrl}}"
          >
            <a th:href="@{${moments.nextUrl}}">
              <i class="joe-font joe-icon-next"></i>
            </a>
          </li>
        </ul>
      </th:block>
    </th:block>
  </th:block>
</html>
